//
   Created by levy on 16/5/1.
extends layout
block title
  title 元素之旅
block style
  | body {margin-bottom: 5em;}
block body-content
  article
    hgroup
      h1 h1
      h2 h2
    section
      p as you can see
        a(href="#fig") Figure
      code figure
      figure(id="fig")
        figcaption figure 不起效？
        img(alt="figure img" src="test")
    section
      code mark
      p 用于突显内容，一般用于搜索。应该使用
        mark js,
        | 或
        mark 服务端代码
        | 添加 mark 元素
    section
      code progress
      h1 your task/score is in progress/meter
      div
        progress(min="0" max="100" value="50")
        span 50%
      div
        code meter
        meter(min="0" max="100" low="60" high="90" value="50" optimum="100")
    section
      code time
      p 尽管当前大多数浏览器都不支持time
      time(datetime="2016-05-01") 2016-05-01
    section
      style(scoped)
        details { color: red}
      code details
      details
        summary summary
        p hello details
    section
      code async
      p script async
    section
      code datalist list
      p  这个safari无法显示。。。
      input(list="colors")
      datalist(id="colors")
        option(value="blue")
        option(value="red")
        option(value="white")


